<!--模板开始-->
<style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
            -webkit-box-sizing: border-box
        }

        body {
            background-color: white
        }

        #container {
            position: relative;
            width: 500px;
            height: 815px;
            overflow: hidden;
        }
        #container > img,#container > div {
            position: absolute;
        }

        #bg2 {
            opacity: 0;
        }

        #shuzhi1 {
            position: absolute;
            top: -35px;
            left: -14px;
            -webkit-transform-origin: 0% 0%;
        }
        #shuzhi2 {
            position: absolute;
            top: 0px;
            left: 305px;
            -webkit-transform-origin: 100% 0%;
        }
        #shuzhi3 {
            position: absolute;
            top: 0px;
            right: -10px;
            -webkit-transform-origin: 100% 0%;
        }
        #dian1 {
            position: absolute;
            top: 0px;
            left: 35px;
        }
        #dian2 {
            position: absolute;
            top: 250px;
            left: 35px;
        }
        #dian3 {
            position: absolute;
            top: 500px;
            left: 35px;
        }

        #xian4 {
            position: absolute;
            left: -20px;
            top: 762px;
            -webkit-transform: scale(1.5);
        }
        #xian5 {
            position: absolute;
            right: -124px;
            top: 720px;
        }

        #xuehua1 {
            position: absolute;
            left: 0px;
            top: -100px;
            -webkit-transform: scale(.6);
        }
        #xuehua2 {
            position: absolute;
            left: 80px;
            top: -100px;
        }
        #xuehua3 {
            position: absolute;
            left: 200px;
            top: -60px;
            -webkit-transform: scale(.6);
        }

        #xuehua4 {
            position: absolute;
            left: 350px;
            top: -90px;
        }

        #xuehua5 {
            position: absolute;
            left: 420px;
            top: -80px;
            -webkit-transform: scale(.6);
        }


        #pagetitle {
            position:absolute;
            width: 200px;
            height: 210px;
            top: 278px;
            left: 108px;
            opacity:0;
        }
        #title_bg_ctn {
            position:absolute;
            width: 318px;
            height: 318px;
            top: 224px;
            left:  91px;
            overflow: hidden;
            -webkit-clip-path: circle(50% at 50% 50%);
        }
        #title_bg {
            position: absolute;
            top: -23px;
            left: -23px;
            opacity: 0;
        }

        #xiaoxue {
            position:absolute;
            top: 290px;
            left:  318px;
            opacity: 0;
        }

    
        .titletable {
            position: absolute;
            width: 100%;
            height: 100%;
            /*width: 270px;
            height: 210px;
            top: 0px;
            left: 20px;*/
            display: table;
        }

        #titlecontent {
            vertical-align:middle;
            display:table-cell;
            text-align:center;
            /*font-size:22px;*/
            font-size:21px;
            line-height:33px;
            color:#FCFDFD;
        }

        #xian1 {
            position: absolute;
            top: 248px;
            left: 60px;
            opacity: 0;
        }
        #xian2 {
            position: absolute;
            top: 305px;
            left: 386px;
            opacity: 0;
        }
        #xian3 {
            position: absolute;
            top: 480px;
            left: 335px;
            opacity: 0;
        }
        #ye3 {
            position: absolute;
            top: 240px;
            left: 30px;
            opacity: 0;
        }
        #ye2 {
            position: absolute;
            top: 265px;
            left: 58px;
            opacity: 0;
        }
        #ye1 {
            position: absolute;
            top: 284px;
            left: 119px;
            opacity: 0;
        }

        .page_ctn {
            position: absolute;
            left: 40px;
            border:solid 8px rgba(255,255,255, 1);
            opacity: 0;
        }
        .page {
        }
        .showwords {
            font-size: 18px;
            color: white;
            position: absolute;
            z-index: 1;
            bottom: 20px;
            left: 15%;
            width: 70%;
            line-height: 30px;
            text-align: center;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);;
            letter-spacing: 2px;
        }

        .page_h {
            position: absolute;
        /*  top: 50px;
            left: 50px;*/
            width: 420px;
            height: 280px;
            opacity: 0;
            display: none;
            border:solid 8px rgba(255,255,255, 1);
        }
    

        #page2_h {
            position: absolute;
            top: 56px;
            left: 50px;
        }
    
        #page3_h {
            position: absolute;
            top: 425px;
            left: 30px;
        }

        #page2_1_h {
            position: absolute;
            top: 56px;
            left: 50px;
        }
    
        #page3_1_h {
            position: absolute;
            top: 425px;
            left: 30px;
        }
    
        .page_v {
            position: absolute;
        /*  top: 50px;
            left: 50px;*/
            width: 260px;
            height: 390px;
            opacity: 0;
            display: none;
            border:solid 8px rgba(255,255,255, 1);

        }

        #page4 {
        }
    

        #page2_v {
            position: absolute;
            top: 20px;
            right: 33px;
        }
    

        #page3_v {
            position: absolute;
            top: 350px;
            left: 33px;
        }

        #page2_1_v {
            position: absolute;
            top: 20px;
            right: 33px;
        }
    

        #page3_1_v {
            position: absolute;
            top: 350px;
            left: 33px;
        }

    
    </style>
    <style type="text/css">
        @-webkit-keyframes page3
        {
            0%  {
                opacity: 0;
                -webkit-transform: scale(1.01);
            }
            18%  {
                opacity: 1;
                -webkit-transform: scale(1) translate(0px,0px);
            }
            50%  {
                -webkit-transform: scale(1) translate(10px,-20px);
            }
            83%  {
                opacity: 1;
                -webkit-transform: scale(1) translate(10px,0px);
            }
            100%  {
                opacity: 0;
                -webkit-transform: scale(1) translate(50px,0px);
            }
        }
        @-webkit-keyframes page3_1
        {
            0%  {
                opacity: 0;
                -webkit-transform: scale(1.04);
            }
            18%  {
                opacity: 1;
                -webkit-transform: scale(1) translate(0px,0px);
            }
            50%  {
                -webkit-transform: scale(1) translate(10px,-20px);
            }
            83%  {
                opacity: 1;
                -webkit-transform: scale(1) translate(10px,0px);
            }
            100%  {
                opacity: 0;
                -webkit-transform: scale(1) translate(50px,0px);
            }
        }
        @-webkit-keyframes page2
        {
            0%  {
                opacity: 0;
                -webkit-transform: scale(1.01);
            }
            20%  {
                opacity: 1;
                -webkit-transform: scale(1) translate(0px,0px);
            }
            47%  {
                -webkit-transform: scale(1) translate(10px,-20px);
            }
            82%  {
                opacity: 1;
                -webkit-transform: scale(1) translate(10px,0px);
            }
            100%  {
                opacity: 0;
                -webkit-transform: scale(1) translate(-50px,0px);
            }
        }
        @-webkit-keyframes page2_1
        {
            0%  {
                opacity: 0;
                -webkit-transform: scale(1.04);
            }
            20%  {
                opacity: 1;
                -webkit-transform: scale(1) translate(0px,0px);
            }
            47%  {
                -webkit-transform: scale(1) translate(10px,-20px);
            }
            82%  {
                opacity: 1;
                -webkit-transform: scale(1) translate(10px,0px);
            }
            100%  {
                opacity: 0;
                -webkit-transform: scale(1) translate(-50px,0px);
            }
        }
        @-webkit-keyframes page4
        {
            0%  {
                opacity: 0;
                -webkit-transform: scale(1);
            }
            18%  {
                opacity: 1;
                -webkit-transform: scale(1);
            }
            60%  {
                -webkit-transform: scale(.92);
            }
            85%  {
                opacity: 1;
                -webkit-transform: scale(1);
            }
            100%  {
                opacity: 0;
                -webkit-transform: scale(1);
            }
        }
        @-webkit-keyframes page4_1
        {
            0%  {
                opacity: 0;
                -webkit-transform: scale(1.1);
            }
            18%  {
                opacity: 1;
                -webkit-transform: scale(1);
            }
            60%  {
                -webkit-transform: scale(.92);
            }
            85%  {
                opacity: 1;
                -webkit-transform: scale(1);
            }
            100%  {
                opacity: 0;
                -webkit-transform: scale(1);
            }
        }
        @-webkit-keyframes page1
        {
            0%  {
                opacity: 0;
                -webkit-transform: scale(.6);
            }
            18%  {
                opacity: 1;
                -webkit-transform: scale(1);
            }
            48%  {
                -webkit-transform: scale(.94);
            }
            79%  {
                opacity: 1;
                -webkit-transform: scale(1);
            }
            100%  {
                opacity: 0;
                -webkit-transform: scale(.8);
            }
        }
        @-webkit-keyframes page1_1
        {
            0%  {
                opacity: 0;
                -webkit-transform: scale(.8);
            }
            18%  {
                opacity: 1;
                -webkit-transform: scale(1);
            }
            48%  {
                -webkit-transform: scale(.94);
            }
            79%  {
                opacity: 1;
                -webkit-transform: scale(1);
            }
            100%  {
                opacity: 0;
                -webkit-transform: scale(.8);
            }
        }
        
        @-webkit-keyframes fadein
        {
            0%  {opacity: 0}
            100%    {opacity: 1}
        }
        @-webkit-keyframes fadeout
        {
            0%  {opacity: 1}
            100%    {opacity: 0}
        }
        @-webkit-keyframes shuzhi
        {
            0%  {
                -webkit-transform: rotate(0deg);
            }
            100%  {
                -webkit-transform: rotate(3deg);
            }
        }
        @-webkit-keyframes dian1
        {
            0%  {
                -webkit-transform: translateY(0px);
                opacity: 1;
            }
            35%  {
                opacity: 1;
            }
            70%  {
                opacity: 0;
                -webkit-transform: translateY(50px);
            }
            100%  {
                opacity: 0;
                -webkit-transform: translateY(0px);
            }
        }
        @-webkit-keyframes xian4
        {
            0%  {
                -webkit-transform: scale(1.5) translateX(0px);
            }
            100%  {
                -webkit-transform: scale(1.5) translateX(-135px);
            }
        }
        @-webkit-keyframes xian5
        {
            0%  {
                -webkit-transform: translateX(0px);
            }
            100%  {
                -webkit-transform: translateX(-125px);
            }
        }

        @-webkit-keyframes xuehua1
        {
            0%  {
                opacity: 1;
                -webkit-transform: scale(.6) translateY(0px) rotate(0deg);
            }

            85%  {
                opacity: 1;
            }
            100%  {
                opacity: 0;
                -webkit-transform: scale(.6) translateY(500px) rotate(60deg);
            }
        }

        @-webkit-keyframes xuehua2
        {
            0%  {
                opacity: 1;
                -webkit-transform: translateY(0px) rotate(0deg);
            }
            85%  {
                opacity: 1;
            }
            100%  {
                opacity: 0;
                -webkit-transform: translateY(400px) rotate(-90deg);
            }
        }

        @-webkit-keyframes titlein
        {
            0%  {
                opacity: 0;
                -webkit-transform: translateY(80px);
            }
            28%  {
                opacity: 1;
                -webkit-transform: translateY(0px);
            }
            68%  {
                opacity: 1;
                -webkit-transform: translateY(0px);
            }
            100%  {
                opacity: 0;
                -webkit-transform: translateY(-80px);
            }
        }
        @-webkit-keyframes ye
        {
            0%  {
                opacity: 0;
                -webkit-transform: translateY(50px);
            }
            8%  {
                opacity: 1;
                -webkit-transform: translateY(0px);
            }
            13%  {
                -webkit-transform: translateY(10px);
            }
            46%  {
                -webkit-transform: translateY(20px);
            }
            81%  {
                opacity: 1;
                -webkit-transform: translateY(10px);
            }
            100%  {
                opacity: 0;
                -webkit-transform: translateY(50px);
            }
        }
        @-webkit-keyframes xiaoxue
        {
            0%  {
                opacity: 0;
            }
            8%  {
                opacity: 0;
                -webkit-transform: scale(.6);
            }
            22%  {
                opacity: 1;
                -webkit-transform: scale(1.1);
            }
            28%  {
                opacity: 1;
                -webkit-transform: scale(1);
            }
            88%  {
                opacity: 1;
                -webkit-transform: scale(1);
            }
            100%  {
                opacity: 0;
                -webkit-transform: scale(1.5);
            }
        }
        @-webkit-keyframes xian1
        {
            0%  {
                opacity: 0;
                -webkit-transform: translateX(-30px);
            }
            28%  {
                opacity: 1;
            }
            86%  {
                opacity: 1;
                -webkit-transform: translateX(30px);
            }
            100%  {
                opacity: 0;
                -webkit-transform: translateX(100px);
            }
        }
        @-webkit-keyframes xian2
        {
            0%  {
                opacity: 0;
                -webkit-transform: translateX(30px);
            }
            28%  {
                opacity: 1;
            }
            86%  {
                opacity: 1;
                -webkit-transform: translateX(-30px);
            }
            100%  {
                opacity: 0;
                -webkit-transform: translateX(-100px);
            }
        }
        @-webkit-keyframes title_bg
        {
            0%  {
                opacity: 0;
                -webkit-transform: scale(.5);
            }
            10%  {
                opacity: 1;
                -webkit-transform: scale(1);
            }
            86%  {
                opacity: 1;
            }
            100%  {
                opacity: 0;
            }
        }
    
    </style>
    <body>
        <div id='container'>
            <img id='bg1' src="{$skinurl}skin/xiaoxue/bg1.jpg"/>
            <img id='bg2'src="{$skinurl}skin/xiaoxue/bg2.jpg"/>


            <img id='dian2'src="{$skinurl}skin/xiaoxue/dian.png"/>
            <img id='dian3'src="{$skinurl}skin/xiaoxue/dian.png"/>

            <img id='xiaoxue'src="{$skinurl}skin/xiaoxue/xiaoxue.png"/>

            <div id='title_bg_ctn'>
                <img id='ye3'src="{$skinurl}skin/xiaoxue/ye3.png"/>
                <img id='ye2'src="{$skinurl}skin/xiaoxue/ye2.png"/>
                <img id='ye1'src="{$skinurl}skin/xiaoxue/ye1.png"/>

                <img id='title_bg'src="{$skinurl}skin/xiaoxue/title_bg.png"/>
            </div>

            <div id='pagetitle'>
                <div class='titletable'>
                    <div id='titlecontent'>
                    </div>
                </div>
            </div>

            <img id='xian1'src="{$skinurl}skin/xiaoxue/xian1.png"/>
            <img id='xian2'src="{$skinurl}skin/xiaoxue/xian2.png"/>
            <img id='xian3'src="{$skinurl}skin/xiaoxue/xian3.png"/>


            <img id='shuzhi1'src="{$skinurl}skin/xiaoxue/shuzhi1.png"/>
            <img id='shuzhi2'src="{$skinurl}skin/xiaoxue/shuzhi2.png"/>
            <img id='shuzhi3'src="{$skinurl}skin/xiaoxue/shuzhi3.png"/>

            <div id='page1_1_ctn' class='page_ctn'>
                <div id='page1_1' class='page'>
                </div>
            </div>
            <div id='page1_ctn' class='page_ctn'>
                <div id='page1' class='page'>
                    <span id='word1' class='showwords'></span>
                </div>
            </div>

            <div id='page3_1_h' class='page_h'>
            </div>

            <div id='page3_1_v' class='page_v'>
            </div>

            <div id='page3_h' class='page_h'>
                <div id='word3_h' class='showwords'></div>
            </div>

            <div id='page3_v' class='page_v'>
                <div id='word3_v' class='showwords'></div>
            </div>


            <div id='page2_1_h' class='page_h'>
            </div>

            <div id='page2_1_v' class='page_v'>
            </div>
            <div id='page2_h' class='page_h'>
                <div id='word2_h' class='showwords'></div>
            </div>

            <div id='page2_v' class='page_v'>
                <div id='word2_v' class='showwords'></div>
            </div>



            <div id='page4_1_ctn' class='page_ctn'>
                <div id='page4_1' class='page'>
                </div>
            </div>
            <div id='page4_ctn' class='page_ctn'>
                <div id='page4' class='page'>
                    <span id='word4' class='showwords'></span>
                </div>
            </div>

            <img id='xuehua1'src="{$skinurl}skin/xiaoxue/xuehua1.png"/>
            <img id='xuehua2'src="{$skinurl}skin/xiaoxue/xuehua2.png"/>
            <img id='xuehua3'src="{$skinurl}skin/xiaoxue/xuehua3.png"/>
            <img id='xuehua4'src="{$skinurl}skin/xiaoxue/xuehua4.png"/>
            <img id='xuehua5'src="{$skinurl}skin/xiaoxue/xuehua5.png"/>

            <img id='dian1'src="{$skinurl}skin/xiaoxue/dian.png"/>

            <img id='xian4'src="{$skinurl}skin/xiaoxue/xian3.png"/>
            <img id='xian5'src="{$skinurl}skin/xiaoxue/xian3.png"/>

        </div>
    </body>

<script>
var image_size_width=[];
var image_size_height=[];
var image_url_index=0;
var have_num = 0;
var error_num = 0;
var canshow = true;
var reshow = false;
var timeout = [];
var delaytime=7800;

function id(name)
{
    return document.getElementById(name);
}
function load_images()
{
    reshow = false;
    image_size_width=[];
    image_size_height=[];
    Onload_imgs_url=[];
    image_url_index=0;
    have_num = 0;
    error_num = 0;
    begin_titletime = new Date();
    begin_titletime = begin_titletime.getTime();
    showtitle();
    canshow = true;
    for(var i=0;i<slider_images_url.length;i++)
    {
        var img=new Image();
        img.index=i;
        img.src=slider_images_url[i];
        img.onload=image_onload;
        img.onerror= image_onerror;
        Onload_imgs_url[i] = 'loading';
    }       
}

function image_onerror(event)
{
    var img = event.target;
    var index = img.index;
    if(index<10)
        error_num ++;
    Onload_imgs_url[index] = 'not find';
    console.log(Onload_imgs_url[index]);
    console.log(have_num + '-' + error_num);
    if((have_num+error_num >= 10 || slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            liangziyun_kawa();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    liangziyun_kawa();
                },dis_titletime);
        }
    }
}

function image_onload(event)
{
    if(reshow == true)
        return;

    var img = event.target;
    var index = img.index;

    if(index<10)
    {
        have_num++;
    }
    Onload_imgs_url[index] = img.src;
    image_size_height[index] = img.height;
    image_size_width[index] = img.width;

    // console.log(Onload_imgs_url[index]);
    // console.log(have_num + '-' + error_num);

    if((have_num + error_num >= 10 ||slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            liangziyun_kawa();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    liangziyun_kawa();
                },dis_titletime);
        }

    }
}
function showtitle()
{
    id('bg2').style.webkitAnimation = 'fadein 2.3s linear infinite alternate both';

    id('dian1').style.webkitAnimation = 'dian1 2s linear infinite  both';
    id('dian2').style.webkitAnimation = 'dian1 2s linear infinite  both';
    id('dian3').style.webkitAnimation = 'dian1 2s linear infinite  both';

    id('xuehua1').style.webkitAnimation = 'xuehua1 7s linear infinite both';
    id('xuehua2').style.webkitAnimation = 'xuehua2 7s 2s linear infinite both';
    id('xuehua3').style.webkitAnimation = 'xuehua1 7s linear infinite both';
    id('xuehua4').style.webkitAnimation = 'xuehua2 7s 1s linear infinite both';
    id('xuehua5').style.webkitAnimation = 'xuehua1 7s 3s linear infinite both';

    id('xiaoxue').style.webkitAnimation = 'xiaoxue 8.3s linear both';
    id('ye3').style.webkitAnimation = 'ye 7.2s 0.7s ease-out both';
    id('ye2').style.webkitAnimation = 'ye 7.2s 0.9s ease-out both';
    id('ye1').style.webkitAnimation = 'ye 7.2s 1.1s ease-out both';
    id('title_bg').style.webkitAnimation = 'title_bg 8.3s linear both';

    id('xian1').style.webkitAnimation = 'xian1 8.3s linear both';
    id('xian2').style.webkitAnimation = 'xian2 8.3s linear both';
    id('xian3').style.webkitAnimation = 'xian2 8.3s linear both';
    id('shuzhi1').style.webkitAnimation = 'shuzhi 3.1s linear infinite alternate both';
    id('shuzhi2').style.webkitAnimation = 'shuzhi 3.3s linear infinite alternate both';
    id('shuzhi3').style.webkitAnimation = 'shuzhi 2.8s linear infinite alternate both';

    id('xian4').style.webkitAnimation = 'xian4 7.3s linear infinite alternate both';
    id('xian5').style.webkitAnimation = 'xian5 7.3s linear infinite alternate both';

    id('pagetitle').style.webkitAnimation = 'titlein 5.7s 1.5s ease-out both';

    id('titlecontent').innerHTML = e_title

}

function liangziyun_kawa()
{
    show1();
}

function show1()
{
    setImage('1');
    
    id('page2_h').style.webkitAnimation = '';
    id('page2_v').style.webkitAnimation = '';

    id('page3_h').style.webkitAnimation = '';
    id('page3_v').style.webkitAnimation = '';

    id('page2_1_h').style.webkitAnimation = '';
    id('page2_1_v').style.webkitAnimation = '';

    id('page3_1_h').style.webkitAnimation = '';
    id('page3_1_v').style.webkitAnimation = '';

    id('page1_ctn').style.webkitAnimation = 'page1 6.5s cubic-bezier(.41,.6,.63,.99) both';
    id('page1_1_ctn').style.webkitAnimation = 'page1_1 6.5s cubic-bezier(.41,.6,.63,.99) both';

    timeout[1] = setTimeout(show2,6000);
}



function show2()
{
    var img_bili2 = setImage('2');
    var img_bili3 = setImage('3');

    id('page4_ctn').style.webkitAnimation = '';
    id('page4_1_ctn').style.webkitAnimation = '';
    
    if (img_bili3 > 1 && img_bili2 > 1) {
        id('page3_h').style.top = '400px';
        id('page2_h').style.top = '86px';

        id('page3_1_h').style.top = '400px';
        id('page2_1_h').style.top = '86px';
    }else {
        id('page3_h').style.top = '';
        id('page2_h').style.top = '';

        id('page3_1_h').style.top = '';
        id('page2_1_h').style.top = '';
    };
    
 
    id('page2_h').style.webkitAnimation = 'page2 6.5s cubic-bezier(.41,.6,.63,.99) both';
    id('page2_v').style.webkitAnimation = 'page2 6.5s cubic-bezier(.41,.6,.63,.99) both';

    id('page2_1_h').style.webkitAnimation = 'page2_1 6.5s cubic-bezier(.41,.6,.63,.99) both';
    id('page2_1_v').style.webkitAnimation = 'page2_1 6.5s cubic-bezier(.41,.6,.63,.99) both';


    id('page3_h').style.webkitAnimation = 'page3 6.5s 0.3s cubic-bezier(.41,.6,.63,.99) both';
    id('page3_v').style.webkitAnimation = 'page3 6.5s 0.3s cubic-bezier(.41,.6,.63,.99) both';

    id('page3_1_h').style.webkitAnimation = 'page3_1 6.5s 0.3s cubic-bezier(.41,.6,.63,.99) both';
    id('page3_1_v').style.webkitAnimation = 'page3_1 6.5s 0.3s cubic-bezier(.41,.6,.63,.99) both';

    timeout[2] = setTimeout(show3,6000);
}
function show3()
{
    setImage('4');

    id('page1_ctn').style.webkitAnimation = '';
    id('page1_1_ctn').style.webkitAnimation = '';
    
    id('page4_ctn').style.webkitAnimation = 'page4 6.5s cubic-bezier(.41,.6,.63,.99) both';
    id('page4_1_ctn').style.webkitAnimation = 'page4_1 6.5s cubic-bezier(.41,.6,.63,.99) both';
    
    timeout[3] = setTimeout(show1,6000);
}


function setImage(idname)
{
    if(reshow == true)
        return;

    while(Onload_imgs_url[image_url_index] == 'not find' || Onload_imgs_url[image_url_index] == 'loading')
    {
        // console.log(Onload_imgs_url[image_url_index]);
        image_url_index++;
        if(image_url_index == Onload_imgs_url.length)
            image_url_index = 0;
    }

    var img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];
    var div,div_1,div_2,div1;
    var div_ctn,div_1_ctn,div_ctn1;
    var height;
    var width;
    var top;
    var left;
    var width_div;
    var height_div;
    var word,word1
   
    if(img_bili < (380/600))
    {
        height = 600;
        width = 600 * img_bili;
        top = 80;
        left = (500-width)/2;
    }
    else if(img_bili <= 1)
    {
        width = 420;
        height = 420 / img_bili;
        left = 32;
        top = (740-height)/2
    }
    else if(img_bili > 1)
    {
        width = 420;
        height = 420/img_bili;
        left = 32;
        top = (740-height)/2;
    } 

    if (idname == '2' || idname == '3') {

        if (img_bili > 1) {
            div = id('page'+idname + '_h');
            div1 = id('page'+idname + '_v');

            div_1 = id('page'+idname + '_1_h');
            div_2 = id('page'+idname + '_1_v');

            word = id('word'+idname + '_h');
            word1 = id('word'+idname + '_v');

            width_div = 420;
            height_div = 280;

            width = 420;
            height = width_div / img_bili;

            if (height < height_div) {
                width = height_div * img_bili;
                height = height_div;
            };

        }else {
            div = id('page'+idname + '_v');
            div1 = id('page'+idname + '_h');

            div_1 = id('page'+idname + '_1_v');
            div_2 = id('page'+idname + '_1_h');

            word = id('word'+idname + '_v');
            word1 = id('word'+idname + '_h');
    
            width_div = 260;
            height_div = 390;

            height = 390;
            width = height * img_bili;
            if (width < width_div) {
                height = width_div / img_bili;
                width = width_div;
            };
        }

        div.style.display = 'block';
        div1.style.display = 'none';

        div_1.style.display = 'block';
        div_2.style.display = 'none';
        
        div.style.backgroundSize = (width) + 'px ' + (height) + 'px';
        div.style.backgroundImage = 'url('+Onload_imgs_url[image_url_index]+')';
        div.style.backgroundRepeat = 'no-repeat';
        div.style.backgroundPosition = -((width - width_div)/2)+'px ' + (-((height - height_div)/2)) + 'px';

        div_1.style.backgroundSize = (width) + 'px ' + (height) + 'px';
        div_1.style.backgroundImage = 'url('+Onload_imgs_url[image_url_index]+')';
        div_1.style.backgroundRepeat = 'no-repeat';
        div_1.style.backgroundPosition = -((width - width_div)/2)+'px ' + (-((height - height_div)/2)) + 'px';

    }else {
        div = id('page'+idname);
        div_ctn = id('page'+idname + '_ctn');
        div_1 = id('page'+idname + '_1');
        div_1_ctn = id('page'+idname + '_1_ctn');

        div.style.width = width + 'px';
        div.style.height = height + 'px';
        div.style.backgroundSize = (width) + 'px ' + (height) + 'px';
        div.style.backgroundImage = 'url('+Onload_imgs_url[image_url_index]+')';
        div.style.backgroundRepeat = 'no-repeat';

        div_ctn.style.width = (width+ 16) + 'px';
        div_ctn.style.height = (height +16) + 'px';
        div_ctn.style.top = (top) + 'px';
        div_ctn.style.left = (left) + 'px';

        div_1.style.width = width + 'px';
        div_1.style.height = height + 'px';
        div_1.style.backgroundSize = (width) + 'px ' + (height) + 'px';
        div_1.style.backgroundImage = 'url('+Onload_imgs_url[image_url_index]+')';
        div_1.style.backgroundRepeat = 'no-repeat';

        div_1_ctn.style.width = (width+ 16) + 'px';
        div_1_ctn.style.height = (height +16) + 'px';
        div_1_ctn.style.top = (top) + 'px';
        div_1_ctn.style.left = (left) + 'px';

        word = id('word'+idname);
    }

  
    var word_string = words[get_pid(Onload_imgs_url[image_url_index])];
    if(word_string != undefined)
    {
        word_string = word_string.replace(/[\n]/ig,'');
     
        word.innerText = word_string;
    }
    else
    {
        word.innerText = "";
    }
    
    image_url_index++;
    if(image_url_index==Onload_imgs_url.length)
        image_url_index = 0;

    return img_bili;
}

call_me(load_images);

function reload_scene()
{
    clearnode();
    reshow = true;
    setTimeout(load_images,100);
}

function clearnode()
{
    for(var i = 0; i<timeout.length; i++)
    {
        clearTimeout(timeout[i]);
    }

    var xinArr = ['pagetitle','bg2','dian1','dian2','dian3','xuehua1','xuehua2','xuehua3','xuehua4','xuehua5','xiaoxue','ye3','ye2','ye1','title_bg','xian1','xian2','xian3','xian4','xian5','shuzhi1','shuzhi2','shuzhi3','page2_h','page2_v','page3_h','page3_v','page2_1_h','page2_1_v','page3_1_h','page3_1_v','page1_ctn','page1_1_ctn','page4_ctn','page4_1_ctn'];

    for(var i = 0 ;i < xinArr.length ;i++)
    {
        id(xinArr[i]).style.webkitAnimation = '';
    }
}

</script>
<!-- 模板结束 -->